<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            margin: 0;
        }

        #cesiumContainer {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="cesiumContainer">
</div>
<div id="vueContainer">
</div>
<template id="content">
    <div style="position:absolute; top: 0">
      <button @click="isBoxSection = !isBoxSection">点击获取经纬度并且生成盒子</button>
      <button @click="isFlatSection">平剖</button>
      <button @click="drawPointStart">点击绘制点</button>
      <button @click="resetPoint">清除创建点的实体</button>
      <button @click="drawLineStart">点击绘制线段</button>
      <button @click="reset">清除所有实体</button>
    </div>
</template>
<script src="../../config/index.js"></script>
<script src="variable.js"></script>
<script src="ac-min.js"></script>
<script>
  const { createApp, ref, onMounted, onBeforeUnmount, watch } = Vue
  const app = createApp({
    template: `#content`,
    setup() {
      //控制是否进行盒子剖切
      const isBoxSection = ref(false)
      //是否绘制点
      const isDrawPoint = ref(false)


      //是否平剖
      const isFlatSection = () => {
        flatSection()
      }

      //绘制点
      const drawPointStart = () => {
        drawPoint()
      }

      //清除所有点实体
      const resetPoint = () => {
        resetAllPoint()
      }

      //绘制线
      const drawLineStart = () => {
        drawLine()
      }

      //清除所有实体
      const reset = () => {
        resetAll()
      }

      watch(() => isBoxSection.value,(value, oldValue) => {
        if(value) {
          getLaLo()
        }else{
          removeLeftClick()
        }
      })

      //挂载完成执行的程序
      onMounted(() => {
      })
      //销毁组件
      onBeforeUnmount(() => {
      })
      return {
        isBoxSection,
        drawPointStart,
        isFlatSection,
        drawLineStart,
        resetPoint,
        reset,
      }
    }
  })
  app.mount('#vueContainer')
</script>
</body>
</html>
